<template>
  <div>
<h1 style="font-family:'Hiragino Sans GB'">富文本编辑器提交</h1>
    <div id="wangeditor">
      <div ref="editorElem" style="text-align:left;"></div>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>

</template>
<script>
  import E from "wangeditor";
  export default {
    name: "Editor",
    data() {
      return {
        editor: null,
        ed: {
          editorContent:''
        }
      };
    },
    methods:{
      submit(){
        this.postRequest("/editor/save",this.ed).then(resp=> {
          if (resp && resp.status == 200) {
            this.success();
          }else{
           this.error();
          }
        });

        },
      success() {
        this.$message({
          message: '提交成功！',
          type: 'success'
        });
      },
      error() {
        this.$message.error('提交失败！');
      }

    },
    // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
    mounted() {
      this.editor = new E(this.$refs.editorElem);
      this.editor.customConfig.showLinkImg = true;
      this.editor.customConfig.uploadImgServer = '/editor/upload';
      this.editor.customConfig.uploadFileName = 'uploadFile';
      // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
        this.ed.editorContent = html;
      };
      this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
      this.editor.create();
    }
  }// 创建富文本实例
</script>
